<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .todo-item {
      display: flex;
    }
  </style>
</head>
<body>

<div id="app">
  <h1>任务列表</h1>
  <div>
    <!--通过属性来指定自定义的值
        如果要给组件传值的话，使用组件的属性来传值
        如果组件中对数据进行了改变的话，通过 自定义事件来传出数据，使用者通过监听事件来接收数据
    -->
    <todo-item :task="t.name" v-for="(t,index) in tasks" @change="modifyData($event,index)"></todo-item>
  </div>
</div>


<template id="todo-item-template">
  <div class="todo-item">
    <input type="checkbox" v-model="completed">
    <span v-if="!editable" @dblclick="fn">{{task}}</span>
    <input v-else type="text" v-model="taskName" @blur="fn2">
  </div>
</template>

<script src="js/vue.js"></script>
<script>
  // 定义全局组件
  Vue.component("todo-item", {
    // 组件中的数据部门必须是函数的方式返回
    data: function () {
      return {
        completed: false,
        // 使用 task 属性的值作为初始值
        taskName: this.task,
        editable: false
      }
    },
    // 定义属性：
    props: ["task"],
    methods: {
      fn: function () {
        this.editable = true;
      },
      fn2: function () {
        this.editable = false;
        // 触发一个自定义的事件出来，把修改好的数据也通过事件传出去
        this.$emit("change", this.taskName);
      }
    },
    // 组件的模板，除了直接写内容结构之外，也可以写一个选择器
    template: "#todo-item-template"
  });

  var vm = new Vue({
    el: "#app",
    data: {
      tasks: [
        {name: "1.需求分析"},
        {name: "2.概要设计"},
        {name: "3.详细设计"},
        {name: "4.开发功能"}
      ]
    },
    methods: {
      modifyData: function (val, index) {
        console.log(val, index)
        this.tasks[index].name = val;
      }
    },
    computed: {},
    created: function () {
    },
    watch: {},
    filters: {}
  });

</script>
</body>
</html>
